<template>
  <div>
    <myheader></myheader>

    <section class="featured-block text-center">
      <div class="container">
        <div>
          <Breadcrumb :datas="datas"></Breadcrumb>
        </div>
      </div>
    </section>

    <table align='center'>
      <tr>
        <td>
          用户名：
          <input type="text" v-model="username" placeholder="输入用户名" />&emsp;
        </td>
        <td>{{namemsg}}</td>
      </tr>
      <tr>
        <td>
          密&emsp;码：
          <input type="text" v-model="password" placeholder="密码" />&emsp;
        </td>
        <td>{{psdmsg}}</td>
      </tr>
      <tr style="float:left">
        <td>验证码：</td>
        <td><img class='code'  :src="imgcode" alt="图片加载失败" @click="get_code"></td>
      </tr>
      <tr>
        <td>&emsp;&emsp;&emsp;
          <input type="text" v-model="code" placeholder="请输入验证码"/>
        </td>
        <td>{{codemsg}}</td>
      </tr>
      <tr>
        <td>
          <!-- 滑动模块 -->
          <dragVerify :width='300' :height='height' :text='text' ref='Verify'></dragVerify>
        </td>
      </tr>
      <tr>
        <td>
          <img @click="sina_login" src="http://127.0.0.1:8000/static/sina.png" class="code" alt="新浪加载失败">
          &emsp;&emsp;
          <img @click="ding_login" src="http://127.0.0.1:8000/static/dingding.png" class="code" alt="钉钉加载失败">
        </td>
      </tr>
      <tr>
        <td>&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;
          <Button @click.prevent="submit" color="blue" width="100px">登录</Button>
        </td>
      </tr>
    </table>

    <footer class="footer">
      <div class="container">@v3u.cn</div>
    </footer>
  </div>
</template>


 
<script>
import axios from "axios";
import myheader from "./myheader.vue";
// 导入滑块验证码
import dragVerify from 'vue-drag-verify'
export default {
  data() {
    return {
      //滑动模块参数
      width:300,
      height:40,
      text:"请将滑块移动到右边",

      msg: "这是一个变量",
      //面包屑导航变量
      datas: [
        { title: "首页", route: { name: "index" } },
        { title: "登录", route: { name: "Login" } }
      ],
      username: "",
      password: "",
      type: 0,
      phone: "",
      num: 0,
      code:'',
      charEle:'',
      namemsg:'',
      psdmsg:"",
      phonemsg:'',
      codemsg:'',
      imgcode:"",
    };
  },
  // components注册组件 可以使用对应的标签来展示
  components: {
    myheader: myheader,
    dragVerify: dragVerify,
  },
    created(){
       
    },
  mounted: function() {
       this.rand()
       this.get_code()
  },
  methods: {
    //新浪微博第三方登录
      sina_login(){
        let client_id=2464168997
        let url="https://api.weibo.com/oauth2/authorize?client_id="+client_id+"&redirect_uri=http://127.0.0.1:8000/myapp/weibo"
        window.location.href=url
      },
      ding_login(){
        let app_id="dingoaax69jocuwkatfpfg";
        let redirect_uri="http://127.0.0.1:8000/myapp/ding";
        let url="https://oapi.dingtalk.com/connect/qrconnect?appid="+app_id+"&response_type=code&scope=snsapi_login&state=STATE&redirect_uri="+redirect_uri   
        window.location.href=url
      },
      rand() {
            this.charEle= Math.floor(Math.random()*(9999-1000))+1000;
        },
      zengze(){
          var patt = /^(?:(?=.*[a-zA-Z])(?=.*[0-9])).{4,}$/;
          var res=patt.test("11111a"); 
          console.log(res)
      },
      get_code(){
        axios({
              url:"http://127.0.0.1:8000/myapp/mycode/",
              method:'get',
              responseType: 'blob',
          }).then(res=>{
              this.imgcode  = window.URL.createObjectURL(res.data);
              //src 就是一个可以显示图片的相对路径。因为window.URL.crateObjectURL(blob)已经进行了转换
        })
      },
    //定义提交事件
    submit: function() {
      console.log(this.$refs.Verify.isPassing)
      if (this.username === "") {
            this.namemsg="您没有输入用户名";
            return false;
      }
      if(this.password==""){  
            this.psdmsg="密码为空";
            return false;
      }
    //   }else if(!/^(?:(?=.*[a-zA-Z])(?=.*[0-9])).{4,}$/.test(this.password)){
    //       this.psdmsg="密码格式错误 以数字字母符号组成"
    //       return false;
    //   }
    //   if(this.phone==""){ 
    //       this.phonemsg="手机号为空";
    //       return false;
    //   }else if (!/^1[365789]\d{9}$/.test(this.phone)){
    //         this.phonemsg="手机号格式不正确";
    //         return false;
    //   }
      if (this.code==""){
            this.codemsg="验证码为空";
            return false 
      }
      if (this.$refs.Verify.isPassing==false){
        this.$Message('请检查滑动验证码');
        setTimeout("window.location.reload()",3); 
        return false;
      }
    // else if(this.code!=this.charEle){
    //         this.codemsg="验证码不正确";
    //         return false;
    //   }
        // 请求后台
      this.axios.get("http://127.0.0.1:8000/myapp/login/", {
          params: { username: this.username, password: this.password,code:this.code}
          }).then(result => {
            console.log(result.data);
            if(result.data.code==200){     
                this.$Message(result.data.msg);
                localStorage.setItem('username',result.data.username)
                localStorage.setItem('uid',result.data.uid)
                localStorage.setItem('jwt',result.data.jwt)
                localStorage.setItem('type',result.data.type)
                this.$router.push('/')
            }else{
              this.$Message(result.data.msg);
              setTimeout("window.location.reload()",3);
              // window.location.reload()
            }
          });
    }
  }
};
</script>
 
<style>
.td {
  padding: 10px;
}
table{margin: 0 auto;}
.code{
  cursor: pointer;
}
</style>